<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery.js"></script>
    <title>原生实现图片上传</title>
</head>

<body>
    <!-- 图片上传原理 ：
        form表单提交input的type=file时，form的提交类型为enctype="multipart/form-data"，才能提交file的文件流到后台。同时结合FormData对象的append方法存储表单数据 -->
    <form  enctype="multipart/form-data">
        <input type="file" id="ipt" name="input" />
    </form>
    <button id="btn">提交上传</button>
    <div>
        <image  src="" id="img"></image>
    </div> 

    <script>
        var formdata=''
        //选择图片
        $('#ipt').change(function(){
            console.log('上传文件信息', $("#ipt")[0].files);
            formdata = new FormData()  //将文件转成二进制数据
            formdata.append("file", $("#ipt")[0].files[0])  //通过append方法存储表单数据，提交ajax时把数据提交给后台 。file是后台接口里要求传的

        })
        //点击提交上传
        $('#btn').click(function () {
            $.ajax({
                type: "POST",
                //借用那个黑马后台管理项目的，图片上传接口
                url: "http://175.27.228.178:3434/api/private/v1/upload",
                headers: {
                    Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE2NjEzMjExOTUsImV4cCI6MTY2MTQwNzU5NX0.CAHavUke-IMl7NfawyHD5lTZu5T1LEi7o4Z2tLhh_8M',
                },
                data:formdata ,//把文件信息提交给后台
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success: function (res) {
                    console.log('上传成功信息', res);
                     alert('上传成功')
                    if(res.meta.status ==200){
                        //设置预览图片-如果返回接口失败，可以用这个图片预览地址 http://175.27.228.178:3434/tmp_uploads/bf8f06beb87cc571e8473c73850fd9b3.png
                         $('#img').attr('src',res.data.url);
                    }
                },
                error: function (err) {
                    console.log('图片上传失败', err);

                }
            })
        })
   
    </script>
</body>

</html>